// var
@vprogress-prefix-cls       : x-video-progress;
@vprogress-main-color       : #A5907B;
@vprogress-bg-color         : #787878;
@vprogress-size             : 4px;
@vprogress-slider-size      : 12px;
@vprogress-font-size        : 12px;

// styles
.@{vprogress-prefix-cls} {
  display: inline-block;
  width: 100%;
  height: @vprogress-size;
  border-radius: @vprogress-size / 2;
  font-size: @vprogress-font-size;
  background-color: @vprogress-bg-color;
  position: relative;
  &-vertical {
    height: 100%;
    width: @vprogress-size;
  }
  &__slider {
    width: @vprogress-slider-size;
    height: @vprogress-slider-size;
    border-radius: 50%;
    background-color: @vprogress-main-color;
    box-shadow: 0 0 @vprogress-slider-size @vprogress-bg-color;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    transform: translate(-50%, -50%);
    &::after {
      content: "";
      .absolute-margin-center;
      width: 50%;
      height: 50%;
      border-radius: 50%;
      background-color: tint(@vprogress-main-color, 30%);
    }
  }
  &-vertical &__slider {
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
  &:hover {
    background-color: tint(@vprogress-bg-color, 15%);
    cursor: pointer;
  }
}
